import React, { useState, useEffect } from 'react';
import { history } from 'umi'
import { Tabs, Card, Button, Form, Input, Table, Tag, Select, Modal, message } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { ExclamationCircleOutlined } from '@ant-design/icons'
import OperaPrompt from '@/components/OperaPrompt'
import request from '@/utils/request'


const { TabPane } = Tabs;
const { Option } = Select
const { confirm } = Modal

const tabList = [
    {
        title: "全部",
        key: "0",
    },
    {
        title: "进行中",
        key: "1",
    },
    {
        title: "已关闭",
        key: "2",
    },
];

const index = () => {
    const [tabKey, setTabKey] = useState("0")

    const [tableData, setTableData] = useState({
        list: [
            {
                id: 1,
                coupon_title: "欢乐大放送优惠卷",
                coupon_type: "满减",
                discount_amount: "18.50",
                publish_num: 99,
                max_buy: 2,
                expired_time: "2020-06-04 12:32:00",
                status_title: "进行中"
            }
        ], total: 0
    })
    const [current, setCurrent] = useState(1)
    const [form] = Form.useForm()

    const columns: any = [
        {
            title: '优惠券名称',
            dataIndex: 'coupon_title',
            render: (text: any) => text,
        },
        {
            title: '优惠券类型',
            dataIndex: 'coupon_type',
            render: (text: any) => text,
            align: "center",
        },
        {
            title: '优惠金额/折扣',
            dataIndex: 'discount_amount',
            render: (text: any) => text,
            align: "center",
        },
        {
            title: '发放数量',
            dataIndex: 'publish_num',
            render: (text: any) => <Tag color="success">{text}</Tag>,
            align: "center",
            width: "120px",
        },
        {
            title: '领取上限',
            dataIndex: 'max_fetch',
            render: (text: any) => <Tag color="blue">{text}张/人</Tag>,
            align: "center",
            width: "120px",
        },
        {
            title: '有效期限',
            dataIndex: 'valid_period',
            width: "260px",
            render: (text: any, record: any) => <div>
                {text}
            </div>,
        },
        {
            title: '状态',
            width: "120px",
            dataIndex: 'status_title',
            align: "center",
            render: (text: any) => <Tag color="green">{text}</Tag>
        },
        {
            title: '操作',
            width: "260px",
            align: "center",
            render: (text: any, record: any) => (
                <>
                    <Tag color="cyan" style={{ cursor: "pointer" }} onClick={() => { history.push(`/promote/shop/coupon-receiver/${record.id}`) }}>领取记录</Tag>
                    <Tag color="green" style={{ cursor: "pointer" }} onClick={() => {
                        history.push(`/promote/shop/coupon/${record.id}`)
                    }}>编辑</Tag>
                    <Tag color="orange" style={{ cursor: "pointer" }} onClick={() => {
                        couponClose(record.id)
                    }}>关闭</Tag>

                </>
            ),
        },
    ];

    const getList = (params: any = {}) => {
        request(`/promote/coupon-list`, {
            params: { pageSize: 10, current, ...params },
        }).then((result) => {
            const { list, total } = result.data
            setTableData({ list, total });
        })
    };

    const couponClose = (couponId: number) => {
        confirm({
            title: '是否关闭?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                request(`/promote/coupon-close`, {
                    method: "PUT",
                    params: { couponId },
                }).then((result) => {
                    message.success("关闭成功", 1, () => {
                        getList()
                    })

                })
            }
        });
    }

    useEffect(() => {
        getList()
    }, [])

    const onSearch = (values: any) => {
        let status = tabKey === "0" ? "" : tabKey
        getList({ ...values, status })
    }
    return (
        <PageHeaderWrapper title={false}>
            <Card bordered={false}>
                <OperaPrompt dataList={[
                    "点击添加优惠券按钮可以添加优惠券，点击详情按钮可以查看优惠券详情",
                    "进行中的优惠券需先关闭才可进行删除操作",
                    "点击删除按钮会删除会员领取的优惠券，请谨慎操作",
                    "时间超过优惠券设置的结束时间或有效期限时，优惠券自动关闭",
                    "手动关闭优惠券后，用户将不能领取该优惠券，但是已经领取的优惠券（未到期）仍然可以使用",
                ]} />

                <div style={{ padding: "8px 0" }}>
                    <Button type="primary" onClick={() => {
                        history.push('/promote/shop/coupon/0')
                    }}>添加优惠卷</Button>
                    <Button onClick={() => {
                        history.push('/promote/shop')
                    }} style={{ marginLeft: "6px" }}>返回</Button>
                </div>

                <div>
                    <Form
                        layout="inline"
                        onFinish={onSearch}
                        form={form}
                    >
                        <Form.Item label="优惠卷名称" name="coupon_title">
                            <Input placeholder="请输入优惠卷名称" />
                        </Form.Item>
                        <Form.Item label="优惠券类型" name="coupon_type">
                            <Select placeholder="优惠券类型" style={{ width: "120px" }}>
                                <Option value="1">满减</Option>
                                <Option value="2">折扣</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label="有效期限" name="valid_type">
                            <Select placeholder="有效期限" style={{ width: "120px" }}>
                                <Option value="1">固定时间</Option>
                                <Option value="2">想对时间</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit">查询</Button>
                            <Button style={{ marginLeft: "6px" }}>重置</Button>
                        </Form.Item>
                    </Form>
                </div>

                <Tabs activeKey={tabKey} onChange={(activeKey) => {
                    setTabKey(activeKey)
                    form.submit()
                }}>
                    {
                        tabList.map((item: any) =>
                            <TabPane tab={item.title} key={item.key} style={{ outline: "none" }}>
                                {
                                    tabKey === item.key &&
                                    <Table
                                        rowKey="id"
                                        columns={columns}
                                        dataSource={tableData.list}
                                    />
                                }
                            </TabPane>
                        )
                    }

                </Tabs>
            </Card>
        </PageHeaderWrapper>
    );
};

export default index;